<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>事件修饰符</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- prevent修饰符 阻止事件的默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="doThis">百度外卖</a>
        <hr>

        <!-- 阻止表单提交事件的默认行为（跳转action对应的页面） -->
        <form action="https://www.baidu.com" @submit.prevent="onSubmit">
            <input type="text">
            <button>提交</button>
        </form>

        <!-- stop修饰符阻止事件冒泡 -->
        <div :style="{padding:'5px',backgroundColor:'#ccc'}" @click="doThis">
            <!-- 阻止事件向上级元素冒泡 -->
            <span @click.stop="doThat">格林·斯潘</span>
        </div>
        <hr>

        <!-- 多个事件修饰符串联执行 -->
        <div :style="{padding:'5px',backgroundColor:'#ccc'}" @click="doThis">
            <a href="https://www.baidu.com"  @click.stop.prevent="doThat">百度外卖</a>
        </div>

    </div>

    <script>
        Vue.createApp({
            methods:{
                doThis(e){
                    console.log("doThis",e.target);
                },
                doThat(e){
                    console.log("doThat",e.target);
                },
                onSubmit(){
                    console.log("onSubmit");
                }
            }
        }).mount('#app')
    </script>
</body>
</html>